/**
 * 图标重复显示问题修复工具
 * @author Wu.Liang
 * @date 2025-01-30
 * @description 解决u-icon组件与iconfont字体图标冲突导致的重复显示问题
 */

/**
 * 初始化图标修复工具
 */
export function initIconFixer() {
  console.log('🔧 初始化图标修复工具...')
  
  // 在DOM加载完成后执行修复
  if (typeof document !== 'undefined') {
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', applyIconFixes)
    } else {
      applyIconFixes()
    }
  }
  
  // 在uniapp环境中使用nextTick
  if (typeof uni !== 'undefined') {
    uni.$nextTick(() => {
      applyIconFixes()
    })
  }
}

/**
 * 应用图标修复
 */
function applyIconFixes() {
  try {
    // 1. 修复重复的图标元素
    fixDuplicateIcons()
    
    // 2. 修复样式冲突
    fixStyleConflicts()
    
    // 3. 修复字体加载问题
    fixFontLoadingIssues()
    
    // 4. 添加调试信息
    addDebugInfo()
    
    console.log('✅ 图标修复工具初始化完成')
  } catch (error) {
    console.error('❌ 图标修复工具初始化失败:', error)
  }
}

/**
 * 修复重复的图标元素
 */
function fixDuplicateIcons() {
  if (typeof document === 'undefined') return
  
  // 查找所有u-icon元素
  const uIcons = document.querySelectorAll('.u-icon, [class*="u-icon"]')
  
  uIcons.forEach(icon => {
    // 检查是否有重复的伪元素
    const computedStyle = window.getComputedStyle(icon, '::before')
    if (computedStyle.content && computedStyle.content !== 'none') {
      // 移除重复的伪元素内容
      icon.style.setProperty('--before-content', 'none')
    }
    
    // 确保图标容器正确
    if (icon.parentElement && icon.parentElement.classList.contains('service-icon')) {
      icon.style.display = 'flex'
      icon.style.alignItems = 'center'
      icon.style.justifyContent = 'center'
    }
  })
}

/**
 * 修复样式冲突
 */
function fixStyleConflicts() {
  if (typeof document === 'undefined') return
  
  // 添加样式隔离
  const style = document.createElement('style')
  style.textContent = `
    .u-icon {
      line-height: normal !important;
      display: inline-block !important;
      vertical-align: middle !important;
    }
    
    .u-icon::before,
    .u-icon::after {
      content: none !important;
    }
    
    .service-icon .u-icon {
      line-height: 1 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
  `
  
  // 检查是否已经添加过样式
  if (!document.querySelector('#icon-fixer-styles')) {
    style.id = 'icon-fixer-styles'
    document.head.appendChild(style)
  }
}

/**
 * 修复字体加载问题
 */
function fixFontLoadingIssues() {
  if (typeof document === 'undefined') return
  
  // 监听字体加载完成
  if (document.fonts && document.fonts.ready) {
    document.fonts.ready.then(() => {
      console.log('📝 字体加载完成，应用图标修复')
      applyIconFixes()
    })
  }
  
  // 添加字体加载状态类
  document.documentElement.classList.add('font-loading')
  
  // 模拟字体加载完成
  setTimeout(() => {
    document.documentElement.classList.remove('font-loading')
    document.documentElement.classList.add('font-loaded')
  }, 1000)
}

/**
 * 添加调试信息
 */
function addDebugInfo() {
  if (typeof document === 'undefined') return
  
  // 在开发环境下添加调试信息
  if (process.env.NODE_ENV === 'development') {
    const debugInfo = document.createElement('div')
    debugInfo.id = 'icon-debug-info'
    debugInfo.style.cssText = `
      position: fixed;
      top: 10px;
      right: 10px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 10px;
      border-radius: 5px;
      font-size: 12px;
      z-index: 9999;
      display: none;
    `
    debugInfo.innerHTML = `
      <div>图标修复工具已启用</div>
      <div>u-icon数量: ${document.querySelectorAll('.u-icon, [class*="u-icon"]').length}</div>
      <div>iconfont数量: ${document.querySelectorAll('.iconfont').length}</div>
    `
    document.body.appendChild(debugInfo)
    
    // 点击显示/隐藏调试信息
    debugInfo.addEventListener('click', () => {
      debugInfo.style.display = debugInfo.style.display === 'none' ? 'block' : 'none'
    })
  }
}

/**
 * 强制刷新所有图标
 */
export function refreshAllIcons() {
  if (typeof document === 'undefined') return
  
  console.log('🔄 强制刷新所有图标...')
  
  // 重新应用修复
  applyIconFixes()
  
  // 触发重新渲染
  const uIcons = document.querySelectorAll('.u-icon, [class*="u-icon"]')
  uIcons.forEach(icon => {
    // 强制重新计算样式
    icon.style.display = 'none'
    icon.offsetHeight // 触发重排
    icon.style.display = ''
  })
  
  console.log('✅ 图标刷新完成')
}

/**
 * 检查图标状态
 */
export function checkIconStatus() {
  if (typeof document === 'undefined') return null
  
  const status = {
    uIconCount: document.querySelectorAll('.u-icon, [class*="u-icon"]').length,
    iconfontCount: document.querySelectorAll('.iconfont').length,
    duplicateCount: 0,
    errorCount: 0
  }
  
  // 检查重复图标
  const uIcons = document.querySelectorAll('.u-icon, [class*="u-icon"]')
  uIcons.forEach(icon => {
    const rect = icon.getBoundingClientRect()
    if (rect.width === 0 || rect.height === 0) {
      status.errorCount++
    }
  })
  
  return status
}

/**
 * 导出修复工具
 */
export default {
  init: initIconFixer,
  refresh: refreshAllIcons,
  check: checkIconStatus
}
